<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv= "Content-Type" content="text/html; charset=utf-8" />
	<title>Step1: use a dijit - the Grid</title>
	
	<!-- note: get dojo from http://www.dojotoolkit.org/download/ and install in ../dojo-1.5 -->
	<script type="text/javascript" src="../dojo-1.5/dojo/dojo.js" charset="utf-8">	       
	</script>
	
	<link rel="stylesheet" type="text/css" href="../dojo-1.5/dojo/resources/dojo.css" />
	<link rel="stylesheet" type="text/css" href="../dojo-1.5/dojox/grid/resources/Grid.css" />
	<link rel="stylesheet" type="text/css" href="../dojo-1.5/dojox/grid/resources/tundraGrid.css" />
	<link rel="stylesheet" type="text/css" href="../dojo-1.5/dijit/themes/tundra/tundra.css" />   
	
	<script type="text/javascript">
		dojo.require("dojox.data.CsvStore");		
		dojo.require("dojox.grid.DataGrid");
				
		function onSelect(event) {						
			 var selected = contactsGrid.getItem(event.rowIndex);			 
			 var value1 = csvStore.getValue(selected, "Vorname");
			 var value2 = csvStore.getValue(selected, "Nachname");
			 console.log("selected: "+value1+" "+value2);			 
		};
		
		function setQuery(name) {					 			
			contactsGrid.setQuery({ Nachname: name });
		};			

		dojo.config.isDebug=true;
		dojo.config.parseOnLoad=true;
    </script>
</head>
<body class="tundra">
	<!-- note: jsId puts object in global context -->
	<span dojoType="dojox.data.CsvStore"  jsId="csvStore" url="data/contacts.csv"></span>
	
	<table dojoType="dojox.grid.DataGrid" jsId="contactsGrid" store="csvStore"
            rowsPerPage="20" 
			query="{}" 
			clientSort="true" 
			style="width:600px; height:400px" 
			rowSelector="20px"
			onRowClick="onSelect" >
	<thead>
		<tr>
			<th field="Vorname" width="120px">Vorname</th>
			<th field="Nachname" width="120px">Name</th>
			<th field="Firma" width="auto">Organisation</th>
		</tr>
	</thead>
	</table>
	<a href="#" onclick="setQuery('A*')">A</a>
	<a href="#" onclick="setQuery('B*')">B</a>
	<a href="#" onclick="setQuery('C*')">C</a>
	&nbsp; ... &nbsp; 
	<a href="#" onclick="setQuery('Z*')">Z</a>
	&nbsp; ... &nbsp; 
	<a href="#" onclick="setQuery('*')">reset</a>
	<hr>
	<a href="index.html">back</a>
</body>
</html>